<!DOCTYPE html>
<html>
<head>
<title>Storage Example</title>

<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
	// Wait for Cordova to load
	document.addEventListener("deviceready", onDeviceReady, false);
	var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);

	// Populate the database 
	function populateDB(tx) {
		tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id integer PRIMARY KEY autoincrement, title text,content text)');
	}

	// Query the database
	function queryDB(tx) {
		tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
	}

	// Query the success callback
	//
	function querySuccess(tx, results) {
		var len = results.rows.length;
		var div = "<table>";
		console.log("DEMO table: " + len + " rows found.");
		for ( var i = 0; i < len; i++) {
			console.log("Row = " + i + " ID = " + results.rows.item(i).id
					+ " Data =  " + results.rows.item(i).title);
			div += "<tr><td>" + i + "</td>" + "<td>" + results.rows.item(i).id
					+ "</td>" + "<td>" + results.rows.item(i).title + "</td>"
					+ "<td>" + results.rows.item(i).content + "</td>"
					+ "<td><a href='#' onclick='deletes("
					+ results.rows.item(i).id + ");'>delete</a></td></tr>";
		}
		div += "</table>";
		document.getElementById("div").innerHTML = div;
	}

	var index;

	function deletes(index_) {
		index = index_;
		db.transaction(deletes_, errorCB, successCB);
	}
	function deletes_(tx) {
		tx.executeSql('delete FROM DEMO where id = ' + index, [], querySuccess,
				errorCB);
	}

	// Transaction error callback
	//
	function errorCB(err) {
		console.log("Error processing SQL: " + err.code);
	}

	// Transaction success callback
	//
	function successCB() {
		db.transaction(queryDB, errorCB);

		console.log("Success processing SQL: ");
	}

	// Cordova is ready
	//
	function onDeviceReady() {
		db.transaction(populateDB, errorCB, successCB);
	}

	function display() {
		db.transaction(queryDB, errorCB);
	}

	function search() {
		db.transaction(search_, errorCB, querySuccess);
	}

	function search_(tx) {
		var key = document.getElementById("keywords").value;
		console.log("key: " + key);
		tx.executeSql("SELECT * FROM DEMO where title like '%" + key + "%'",
				[], querySuccess, errorCB);
	}
</script>
</head>
<body>
	<h1>Example</h1>
	<p>Database</p>

	<a href="add.html">Add</a>

	<input name="keywords" id="keywords" placeholder="search something">
	<input type="submit" onclick="search();" />

	<div id="div"></div>

</body>
</html>